<template>
	<view class="row file-item list full-width">
		<view class="file-link-header">
			<slot name="header">
				<image class="file-link-icon" v-if="value.fileExtension==='doc' || value.fileExtension==='docx'" :src="require('@/static/images/common/doc.svg')" mode="widthFix"></image>
				<image class="file-link-icon" v-else-if="value.fileExtension==='xls' || value.fileExtension==='xlsx'" :src="require('@/static/images/common/xls.svg')" mode="widthFix"></image>
				<image class="file-link-icon" v-else-if="value.fileExtension==='ppt' || value.fileExtension==='pptx'" :src="require('@/static/images/common/ppt.svg')" mode="widthFix"></image>
				<image class="file-link-icon" v-else-if="value.fileExtension==='pdf'" :src="require('@/static/images/common/pdf.svg')" mode="widthFix"></image>
				<image class="file-link-icon" v-else-if="isImage(value)" :src="require('@/static/images/common/image.svg')" mode="widthFix"></image>
				<image class="file-link-icon" v-else :src="require('@/static/images/common/unknown.svg')" mode="widthFix"></image>
			</slot>
		</view>
		<view class="file-link-content">
			<slot name="content">
				<text class="text" @click.stop="handlePreviewFile(value)">{{value.newFileName}}</text>
			</slot>
		</view>
		<view class="file-link-footer">
			<slot name="footer"></slot>
		</view>
	</view>	
</template>

<script>
	import config from '@/config'
	export default {
		name: 'FileLink',
		model: {
			prop: 'value',
			event: 'input'
		},
		data() {
			return {
				// 文档扩展名
				docExtensions: ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'],
				// 图片扩展名
				imageExtensions: [
									'jpg', 'jpeg', 'jpe', 'jif', 'jfif', 'jfi',       // JPEG 格式
									'png',                                                 // PNG 格式
									'gif',                                                 // GIF 格式
									'webp',                                                // WebP 格式
									'svg', 'svgz',                                        // SVG 矢量图格式
									'bmp', 'dib',                                         // BMP 位图格式
									'tif', 'tiff',                                        // TIFF 格式
									'ico', 'cur',                                         // 图标格式
									'heif', 'heic',                                       // HEIF/HEIC 格式
									'avif',                                                // AVIF 格式
									'psd',                                                 // Photoshop 格式
									'raw', 'arw', 'cr2', 'nrw', 'k25',                 // 相机原始格式
									'ind', 'indd', 'indt',                               // Adobe InDesign 格式
									'ai',                                                  // Adobe Illustrator 格式
									'eps',                                                 // EPS 格式
									'pdf',                                                 // PDF（可包含图像）
									'apng',                                                // 动态 PNG
									'jp2', 'j2k', 'jpf', 'jpx', 'jpm', 'mj2',        // JPEG 2000 系列
									'dds',                                                 // 游戏纹理格式
									'exif',                                                // EXIF 元数据格式
									'tga',                                                 // TGA 图像格式
									'xcf',                                                 // GIMP 原生格式
									'pbm', 'pgm', 'ppm', 'pnm',                         // 便携式图像格式
									'hdr', 'exr',                                         // 高动态范围图像
									'3fr', 'ari', 'bay', 'crw', 'cap', 'dcs', 'dcr', // 更多相机原始格式
									'drf', 'eip', 'erf', 'fff', 'iiq', 'mef', 'mos',
									'mrw', 'nef', 'nkc', 'orf', 'pef', 'ptx', 'pxn',
									'r3d', 'raf', 'rw2', 'rwl', 'rwz', 'sr2', 'srf',
									'srw', 'x3f'
								]
			};
		},
		props: {
			value: {
				type: Object,
				default: ()=>{}
			},
		},
		computed: {
			/** 指定的文件格式是否是文档 */
			isDoc: function() {
				return function(file) {
					return this.docExtensions.find(f=>f===file.fileExtension)?true:false;
				}
			},
			/** 指定的文件格式是否是图片 */
			isImage: function() {
				return function(file) {
					return this.imageExtensions.find(f=>f===file.fileExtension)?true:false;
				}
			},
			/** 获取文件Url路径 */
			fileUrl: function() {
				return function(file) {
					return config.baseUrl + file.fileName;
				}
			},
		},
		methods: {
			/** 预览文件 */
			handlePreviewFile(file, event) {
				if(this.isDoc(file)) {
					this.handlePreviewDocument(file);
				} else if(this.isImage(file)) {
					this.handlePreviewImage(file);
				} else {
					this.handlePreviewUnknown(file);
				}
			},
			/** 预览图片 */
			handlePreviewImage(file) {
				let self = this;
				const filePath = this.fileUrl(file);
				// 预览图片
				uni.previewImage({
					current: 0,
					urls: [filePath]
				});
			},
			/** 预览文档 */
			handlePreviewDocument(file) {
				const self = this;
				uni.showLoading({
					title: this.$i18n.t('upload.uploading')
				});
				// 下载文件
				uni.downloadFile({
					url: this.fileUrl(file),
					success: (res) => {
						if (res.statusCode === 200) {
							const filePath = res.tempFilePath;
							// 打开下载成功的文档
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								fail: err => {
									self.showErrorToast(this.$i18n.t('file.open-fail')+":"+err);
								},
								success: res => {
									uni.hideLoading();
								}
							});
						} else {
							self.showErrorToast(this.$i18n.t('download.error'));
						}
					},
					fail: function(err) {
						self.showErrorToast(this.$i18n.t('download.error')+":"+err);
					}
				});
			},
			/** 处理浏览未知文件 */
			handlePreviewUnknown(file) {
				const self = this;
				uni.setClipboardData({
					data: this.fileUrl(file),
					success: res => {
						self.showErrorToast(this.$i18n.t('file.not-preview'));
					},
					fail: error => {
						self.showErrorToast(this.$i18n.t('file.not-preview'));
					}
				});
			},
			/** 显示错误信息 */
			showErrorToast(msg) {
				uni.hideLoading();
				uni.showToast({
					icon: 'error',
					title: msg
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.file-item {
		margin-bottom: 20rpx;
		align-items: center;
		gap: 20rpx;
		.text {
			word-break: break-word;
			color: #007BFF;
		}
	}
	.file-link-icon {
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
	}
	.file-link-header {
		flex-shrink: 0;
		height: 100%;
	}
	.file-link-content {
		flex: 1;
		height: 100%;
	}
	.file-link-footer {
		flex-shrink: 0;
		height: 100%;
	}
</style>